<template>
  <el-table
    :data="mapStore.trajectoryWeekTableData"
    style="width: 100%"
    :row-style="mapStore.tableRowStyle"
    @row-click="onClickRow"
  >
    <el-table-column prop="licensePlate" label="车牌号" width />
    <el-table-column prop="startLongitude" label="起始经度" width />
    <el-table-column prop="startDimension" label="起始纬度" width />
    <el-table-column prop="endLongitude" label="终点经度" />
    <el-table-column prop="endDimension" label="终点纬度" />
    <el-table-column prop="kilometerDriven" label="行程公里数" width />
    <el-table-column prop="averageVehicleSpeed" label="平均车速" width>
      <template #default="scope">
        <el-button
          size="small"
          type="info"
          @click="handleGetLocation(scope.$index, scope.row)"
          >定位</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div class="space"></div>

    <el-pagination
      size="small"
      background
      layout="total, sizes, prev, pager, next"
      :current-page="mapStore.trajectoryWeekTableCurrentPage"
      :page-size="mapStore.trajectoryWeekTablePageSize"
      :page-sizes="[5, 10]"
      :total="mapStore.basicInfoTableTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { fetchTrajectoryData } from "@/api/get-data.js";
import pinia from '@/store/pinia';
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let currentPage = ref(1);
let pageSize = ref(5);

const tableRowStyle = (row: any) => {
  return row.rowIndex % 2 === 0
    ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
    : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
};

const handleGetLocation = (index: number, row: any) => {
  window.open("/map/116.391844/39.898457", '_blank');
};

const onClickRow = row => {
  console.log("row");
  console.log(row.licensePlate);
  window.open("/map/116.391844/39.898457", '_blank');
};

// 分页大小改变时的回调
const handleSizeChange = val => {
  mapStore.trajectoryWeekTablePageSize = val;
  fetchTrajectoryData(mapStore.currentCar, mapStore.trajectoryWeekTableCurrentPage, mapStore.trajectoryWeekTablePageSize, "Week");
};

// 当前页改变时的回调
const handleCurrentChange = val => {
  mapStore.trajectoryWeekTableCurrentPage = val;
  fetchTrajectoryData(mapStore.currentCar, mapStore.trajectoryWeekTableCurrentPage, mapStore.trajectoryWeekTablePageSize, "Week");
};
</script>

<style scoped>
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
</style>
